<template>
  <view class="takePart_box">
    <view class="title_box">
      <span class="label_name">签到名单</span>
<!--      <span class="plan_box">报名进度：{{tastPartData.applyPersonCount}}/{{tastPartData.applyPersonLimit}}</span>-->
    </view>
    <view v-for="(item,index) in activityMember" :key="item.memberId">
      <view class="person_box" >

        <view class="person_info">
          <span class="name_box">{{item.memberName}}</span>
          <span>{{item.memberPhone}}</span>
        </view>
        <view :class="item.signed==0?['signIn_box','noSignIn']:['signIn_box']">
          <span>{{item.signed==0?"未签到":"已签到"}}</span>
        </view>
      </view>
      <view v-if="index!=(activityMember.length-1)" class="gray_line">
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  props:['tastPartData'],
  data(){
    return{
      activityMember:[],
    }
  },
  watch:{
    tastPartData: {
      handler(newVal, oldVal) {
        this.activityMember = newVal.activityMember;
      },
      deep: true, // 开启深度监视
      immediate: true
    }
  },
  mounted() {


  },

}
</script>

<style scoped lang="scss">
  .takePart_box{
    width: 100%;
    box-sizing: border-box;
    padding-left: 30rpx;
    padding-right: 30rpx;

    .title_box{
      width:100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .label_name{
        font-weight: 600;
        font-size: 30rpx;
        color: #222222;
      }
      .plan_box{
        font-size: 26rpx;
        color: #ABABAB;
      }
    }

    .person_box{
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .person_info{
        width:60%;
        display: flex;
        justify-content: start;
        align-items: center;
        font-size: 28rpx;
        color: #707070;

        .name_box{
          width: 120rpx;
          margin-right: 20rpx;
        }
      }

      .signIn_box{
        width: 120rpx;
        height: 50rpx;
        background-color: #CBFFEB;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 28rpx;
        color:#3AB889;
        font-size: 24rpx;
      }
      .noSignIn{
        background-color: #E6E6E6;
        color:#707070;
      }

    }

    .gray_line{
      width: 100%;
      height: 3rpx;
      background-color: #C7C7C7 ;

    }


  }
</style>